<template>
  <div>
    <p :style="{ color }">vue3--Demo(使用setup函数)--组件provide&inject--Son组件</p>
    <p
      >Son组件--数据信息：dataFlag:{{ dataFlag }} color:{{ color }} fixModelData:{{
        fixModelData
      }}
      timeFlagData:{{ timeFlagData }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="testProvideMethod">点击调用根组件的弹出提示信息</a-button>
    </a-space>
    <a-divider>组件--子孙组件，以下部分为GrandSon组件部分</a-divider>
    <Demo31GrandSon1 />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, inject } from 'vue';
  import Demo31GrandSon1 from './Demo31GrandSon1.vue';

  export default defineComponent({
    components: { Demo31GrandSon1 },
    inject: {
      color: {
        from: 'color',
      },
      dataFlag: {
        from: 'dataFlag',
        default: false, //默认值
      },
      timeFlagData: {
        from: 'data2',
      },
      testProvideMethod: {
        from: 'testProvideMethod',
      },
    },
    setup() {
      console.log('vue3--Demo(使用setup函数)--组件provide&inject--Son组件--setup 函数 执行了。');

      //注入接收上级传入的数据并在return中导出，也可以直接在inject中定义
      // const color = inject('color');
      // const dataFlag = inject('dataFlag');
      const fixModelData = inject('data1');

      return {
        // color,
        // dataFlag,
        fixModelData,
      };
    },
  });
</script>
<style scoped></style>
